<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus'

import { ElTabPane, ElTabs } from 'element-plus'
import { ref } from 'vue'

import noPay from './components/no-pay/index.vue'
import orderRefund from './components/order-refund/index.vue'
import orderTable from './components/order-table/index.vue'

const activeName = ref('first')
function handleClick(tab: TabsPaneContext, event: Event) {
    console.log(tab, event)
}
</script>

<template>
    <div class="order-query">
        <ElTabs v-model="activeName"
                class="demo-tabs"
                @tab-click="handleClick"
        >
            <ElTabPane label="订单总表"
                       name="first"
            >
                <orderTable v-if="activeName === 'first'" />
            </ElTabPane>

            <ElTabPane label="待付款"
                       name="second"
            >
                <noPay v-if="activeName === 'second'" />
            </ElTabPane>

            <ElTabPane label="退款订单"
                       name="third"
            >
                <orderRefund v-if="activeName === 'third'" />
            </ElTabPane>
        </ElTabs>
    </div>
</template>

<style lang="scss" scoped>
.order-query {
    padding: 20px;
    background-color: #fff;
}
</style>
